<template>
  <div>

    <!--头部搜索栏-->
    <header>
      <div class="form-inline mt-3" align="center" style="background-color: #F8F9F9">
        <div class="col-2" align="right">
          <i class="bi bi-chevron-left h4"></i>
        </div>
        <div class="col-7 input-group" align="right">
          <input type="text" placeholder="请输入商品名称" aria-label="Username" class="form-control" id="search" style="background-color: #F5F5F5" >
        </div>
        <div class="col-3" align="left">
          <button class="btn btn-light" style="height: 28px;line-height: 0px"><i class="bi bi-search"></i> </button>
        </div>
      </div>
    </header>
    <!--商品列表-->
    <div class="col-12 mt-3" id="foodList" align="left">
      <table align="left" cellpadding="2.5" width="100%" >
        <tr valign="top">
          <td rowspan="6"><img src="static/img/food.png" width="100px" height="100px"></td>
        </tr>
        <tr>
          <td style="color: #F59900;font-size: 17px"><strong>脆皮烧鸭饭</strong></td>
        </tr>
        <tr>
          <td  style="color: #A2A2A2;font-size: 12px"  ><div id="box">大桥下游过一群鸭 呀呀呀呀</div></td>
        </tr>
        <tr>
          <td style="font-size: 13px">
            <span>原味</span>&nbsp;
            <span>鸭肉</span></td>
        </tr>
        <tr style="color: #A2A2A2" align="left" >
          <td><small>月售100</small>&nbsp;<small>赞:9</small></td>

        <tr style="color: #EB4E54" valign="top" >
          <!--左边价格-->
          <td><small>￥</small><strong style="font-size: 18px">20.99</strong>
            <small style="color: #A2A2A2">起</small></td>

          <!--右边规格-->
          <td align="right" >
            <!-- Button trigger modal -->
            <button id="guige" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
              <small>选规格</small>
            </button>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <!--头部商品信息-->
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><strong style="color: black">脆皮烧鸭饭</strong></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <!--中间规格-->
                  <div class="modal-body m-0 p-0" align="left">
                    <div class="col-12">
                      <small style="color: #A2A2A2">规格</small>
                    </div>
                    <div class="mt-2">
                      <label class="btn btn-outline-warning btn-sm col-3 ml-3 " >
                        <input type="radio" name="options" id="option1" style="display:none"> 一人份
                      </label>
                      <label class="btn btn-outline-warning btn-sm col-3 ml-3 ">
                        <input type="radio" name="options" id="option2" style="display:none" > 两人份
                      </label>

                      <label class="btn btn-outline-warning btn-sm col-3 ml-3 ">
                        <input type="radio" name="options" id="option3" style="display:none" > 三人份
                      </label>
                    </div>

                    <div class="col-12">
                      <small style="color: #A2A2A2">规格</small>
                    </div>
                    <div class="mt-2">
                      <label class="btn btn-outline-warning btn-sm col-3 ml-3 " >
                        <input type="radio" name="options" id="option4" style="display:none"> 一人份
                      </label>
                      <label class="btn btn-outline-warning btn-sm col-3 ml-3 ">
                        <input type="radio" name="options" id="option5" style="display:none" > 两人份
                      </label>
                    </div>
                  </div>
                  <!--底部加入购物车-->
                  <div class="modal-footer">
                    <button type="button" class="btn btn-warning" v-show="flag" v-on:click="button_add_show" ><i class="bi bi-cart-plus h5"></i>&nbsp;加入购物车</button>
                    <div wdith="50%" v-show="flag2">
                      <b-form-spinbutton id="demo-sb"  v-on:change="button_count_hide" v-model="value" min="0" max="100"></b-form-spinbutton>
                    </div>
                  </div>
                </div>
              </div>
            </div></td>
        </tr>
      </table>
    </div>





  </div>

</template>

<script>
export default {
  name: "SearchList",
  data() {
    return {
      value: 0,
      flag: true,
      flag2:false
    }
  },
  methods: {
    button_add_show(){
      this.flag = false;
      this.flag2=true;
      this.value=1;
    },
    button_count_hide(){
      if(this.value==0){

        this.flag2 = false;
        this.flag=true;
        this.value=0;
      }

    }
  }
}


</script>

<style scoped>

/*
搜索框样式12
*/
#search{
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:20px;
  height: 30px;
}
/* 选规格按钮样式 */
#guige{
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:20px;
  height: 28px;
  text-align: center;
  line-height: 0px;
  width: 70px;
}
/* 选规格按钮中字体样式 */
#guige small{

  line-height: 0px;
}
/* 商品列表中商品简介标签span样式 */
#foodList span{
  display:inline-block;height: 20px;width: 40px; background-color: #F2F2F2;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  text-align: center;
}
/*模态框样式*/
#exampleModal{
  width: 94%;

}
</style>
